<template>
  <div class="box">
    <header>
      <span class="backIcon">
        <el-page-header></el-page-header>
      </span>
      <div><strong>自主报到</strong></div>
    </header>

    <main>
      <div>
        <div class="steps" style="text-align: left">
          <el-row>
            <el-col :span="24">
              <el-steps :active="2" align-center finish-status="success">
                <el-step title="个人信息"></el-step>
                <el-step title="抵校登记"></el-step>
                <el-step title="报到单"></el-step>
              </el-steps>
            </el-col>
          </el-row>
        </div>
        <div>

          <!--宿舍信息-->
          <DormitoryInformationSheet />

          <!--费用信息-->
          <PaymentInformationSheet />
        </div>

        <div>
          <el-button type="primary" style="width: 90%;margin-top: 3rem">保存到手机</el-button>
        </div>

      </div>
    </main>
  </div>
</template>

<script>
import DormitoryInformationSheet from "@/components/DormitoryInformationSheet";
import PaymentInformationSheet from "@/components/PaymentInformationSheet";

export default {
  name: "RegisterInfo",
  components: {PaymentInformationSheet, DormitoryInformationSheet},
  comments: {
    DormitoryInformationSheet,
    PaymentInformationSheet
  }
}
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  padding-bottom: 5rem;
}
/*header style*/
header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  background: #45C0F8;
  color: #fff;
}
header .backIcon {
  position: absolute;
  width: 6rem;
  left: 0;
}
main {
  width: 100%;
}
main .steps {
  width: 100%;
  margin-top: 1rem;
  //background: crimson;
  /*margin-bottom: 1rem;*/
}

</style>
